<!-- 模板 -->
<template>
  <div class="foot-root">
    <!-- 子组件 -->
    <foot-item @click.native="jump('home')">
      <!-- 子组件的内容 -->
      <div>11</div>
      <img :src="pic1" alt="" slot="img" />
      <div slot="txt">首页</div>
      <div slot="txt">首页1</div>
      <h4>ssss</h4>
    </foot-item>
    <foot-item @click.native="jump('hot')">
      <div>22</div>
      <img :src="pic2" alt="" slot="img" />
      <div slot="txt">热点</div>
      <h4>ddd</h4>
    </foot-item>
    <foot-item @click.native="jump('news')">
      <div>33</div>
      <img :src="pic3" alt="" slot="img" />
      <div slot="txt">搜索</div>
    </foot-item>
    <foot-item>
      <div>44</div>
      <img :src="pic4" alt="" slot="img" />
      <div slot="txt">购物车</div>
    </foot-item>
    <foot-item>
      <div>55</div>
      <img :src="pic5" alt="" slot="img" />
      <div slot="txt">我的</div>
    </foot-item>
  </div>
</template>

<script>
import pic1 from '../assets/img/1.png'
import pic2 from '../assets/img/2.png'
import pic3 from '../assets/img/3.png'
import pic4 from '../assets/img/4.png'
import pic5 from '../assets/img/5.png'
import FootItem from './FootItem.vue'
export default {
  name: '',
  data() {
    return { pic1, pic2, pic3, pic4, pic5 }
  },
  props: [],
  components: {
    FootItem
  },
  computed: {},
  filters: {},
  methods: {
    jump(url) {
      console.log(url)
      //跳转到指定的路由组件
      this.$router.push('/' + url)
      // .catch(e => {
      //   console.log(e)
      // })
      //当前url对应的路由对象
      console.log(this.$route)
    }
  },
  created() {},
  mounted() {}
}
</script>

<style lang="less" scoped>
//@import url(); 引入公共css类
.foot-root {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
  // height: 1rem;
  background: aqua;
  .foot-item {
    flex: 1;
    width: 100%;
    img {
      width: 0.4rem;
    }
  }
}
</style>
